<template>
  <div class="zhuti">
    <div class="box">
      <div class="boxInput">
        <div class="rig">
          <div>用户名称：</div>
          <div>
            <el-input v-model="input" placeholder="请输入用户名称" />
          </div>
          <el-button class="sou"  :loading="true" >搜索</el-button>
        </div>
      </div>
    </div>
    <div class="buttom">
      <div class="header">
        <div class="left" @click="openn">
          删除<span v-show="num !== 0" >x{{ num }}
        </span>
        </div>
        <div class="rig" @click="xinZengg">
          <div>
            <el-icon class="tubiao"><CirclePlusFilled /></el-icon>
          </div>
          <span>新增</span>
        </div>
      </div>
      <div class="Tab">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="55vh"
          @selection-change="selevChang"
          :header-cell-style="{ background: '#f5f5f5' }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="name"
            label="用户"
            min-width="120"
            class="TableC"
          />
          <el-table-column prop="username" label="用户" min-width="120" />
          <el-table-column prop="state" label="角色" min-width="120" />
          <el-table-column prop="16666666666" label="手机号" min-width="300" />
          <el-table-column prop="empSex" label="状态" min-width="120" />
          <el-table-column prop="password" label="密码" min-width="120" />
          <el-table-column prop="createTime" label="评价时间" min-width="120" />
          <el-table-column fixed="right" label="操作" min-width="90">
            <template #default="scopee">
              <div class="bbox">
                <el-tooltip content="编辑" placement="top">
                  <div class="reply" @click="afterSales(scopee)">
                    <el-icon><EditPen /></el-icon>
                  </div>
                </el-tooltip>
                <el-tooltip content="删除" placement="top" >
                  <div class="reply" @click="huifu(scopee)">
                    <el-icon><Delete /></el-icon>
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <chouti :title="title1" ref="yongHu" size="40%">
    <div class="xiugai" v-show="xianshi">
      <div>账 &nbsp;&nbsp;&nbsp;号：</div>
      <div class="elinp">
        <el-input v-model="zhanghao" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai" v-show="xianshi">
      <div>密&nbsp;&nbsp;&nbsp; 码：</div>
      <div class="elinp">
        <el-input v-model="mima" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>昵 &nbsp;&nbsp;&nbsp;称：</div>
      <div class="elinp">
        <el-input v-model="minzi" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div>手机号 ：</div>
      <div class="elinp">
        <el-input v-model="phone" placeholder="请输入" />
      </div>
    </div>
    <div class="xiugai">
      <div style="line-height: 40px;">角&nbsp;&nbsp;&nbsp; 色 :</div>
      <div class="elinp">&nbsp;&nbsp;&nbsp;
        <el-radio-group v-model="radio1" class="ml-4">
      <el-radio label="普通管理员" size="large">普通管理员</el-radio>
      <el-radio label="超级管理员" size="large">超级管理员</el-radio>
    </el-radio-group>
      </div>
    </div>
    <div class="xiugai">
      <div>图片：</div>
      <div class="elinp">
        <el-input v-model="phone" placeholder="请输入" />
      </div>
    </div>
    <div class="wei">
      <el-button type="success" :plain="true" @click="open1(num1)"
        >确定<el-icon><Check /></el-icon
      ></el-button>
      <el-button type="danger" @click="quxiao"
        >取消<el-icon><CloseBold /></el-icon
      ></el-button>
    </div>
  </chouti>
</template>

<script setup>
import { ref } from "vue";
import chouti from "../../components/chouti.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import {useList}  from "./api"
const input = ref("");
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const yongHu = ref(null);
const zhanghao = ref(``)
const minzi = ref(``)
const mima = ref(``)
const phone = ref() 
let title1 = ref(``);
let num = ref(0);
let num1 = ref()
const radio1 = ref('普通管理员')
const xianshi = ref(true)
const tableData = ref([]);
// 接口
useList().then((res)=>{
    tableData.value = res.data.data.empList
    console.log(res.data.data);
})
// 多选删除弹出框
const openn = () => {
  
    if(num.value==0){
        ElMessage({
        type: 'info',
        message: '请勾选需要删除的数据',
      })
    }else{
        ElMessageBox.confirm(
    '请确定是否删除？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
    }
 
}
//   多选框
function selevChang(row) {
  console.log(row);
  num.value = row.length;
}
function handleSizeChange() {
  console.log(`显示几行`);
}
// 页面改变
function handleCurrentChange(p) {
  console.log(`页数改变`, p);
}

//   删除
function huifu(row) {
    ElMessageBox.confirm(
    '请确定是否删除？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      console.log(111, row.$index);
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
  
}
// 修改
function afterSales(row) {
    num1.value=2
    xianshi.value=false
  title1.value = `修改`;
  yongHu.value.open();
  console.log(11);
}
// 新增
function xinZengg() {
    num1.value=1
    xianshi.value= true
  title1.value = `新增`;

yongHu.value.open();
}
// 确定
function open1(p){
   
    if (p == 1) {
        if (!minzi.value || !zhanghao.value || !phone.value||!mima.value) {
    ElMessage({
      message: "提交失败",
      type: "error",
    });
  } else {
    ElMessage({
      message: "提交成功",
      type: "success",
    });
    console.log(11);
    }
    } else if (p == 2) {
        if (!minzi.value || !phone.value) {
    ElMessage({
      message: "提交失败",
      type: "error",
    });
  } else {
    ElMessage({
      message: "提交成功",
      type: "success",
    });
    console.log(22);
    }
    }
   
  
}
// 取消
function quxiao(){
    yongHu.value.close()
}
</script>

<style scoped>
.zhuti {
  background-color: #f5f5f5;
}
.box {
  display: flex;
  justify-content: space-between;
}
.box > .left {
  margin-top: 10px;
  width: 50%;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid black;
}
.boxInput > .rig {
  line-height: 40px;
  height: 40px;
  display: flex;
  border-radius: 5px;
  font-size: 14px;
}
.boxInput {
    width: 100%;
  margin-top: 10px;
  /* height: 76px; */
  padding: 15px 10px;
  border-radius: 10px;
  background-color: white;
}
.sou {
  margin-top: 7px;
  width: 70px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  background-color: #ff6a6c;
  text-align: center;
  border-radius: 5px;
  margin-left: 10px;
  color: white;
}
.left > p > span {
  background-color: #ff6a6c;
  border-radius: 100px;
  padding: 2px 5px;
  font-size: 10px;
}
.buttom {
  margin-top: 30px;
  background-color: white;
  border-radius: 10px;
  color:white;
}
.header {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header > div {
  padding: 5px 0px;

  width: 80px;
  text-align: center;
  border-radius: 5px;
}
.header > .left {
  background-color: #7e6aff;
}
.header > .rig {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #ffa66a;
}
.header > .rig > div {
  font-size: 20px;
  margin-right: 3px;
}
.bbox {
  display: flex;
  padding: 30px 0;
}
.reply {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  margin-left: 5px;
  border: 1px #a9acb1 solid;

}
.reply:hover {
  background-color: #ff6a6c;
  color: white;
}
.paging {
  position: fixed;
  bottom: 20px;
}
.xiugai {
  display: flex;
  margin-bottom: 20px;
}
.elinp {
  width: 80%;
}
.wei {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 10px;
}
</style>
